<template>
  <div class="ui_detail">
    <van-nav-bar title="钱包">
      <van-icon name="arrow-left" slot="left" color="#333" @click="back"></van-icon>
      <span style="color: #333;" slot="right" @click="goToControlCards">银行卡</span>
    </van-nav-bar>
    <div class="detail_banner">
        <div class="balance">账户余额 (元)</div>
        <div class="money">0.00</div>
    </div>
    <div class="content_box">
      <div  class="content_box1" @click="goToReacharge">
        <div>
          <span><i class="iconfont icon-zaixianchongzhi "></i></span>
          <span>充值</span>
        </div>
        <div><i class="iconfont icon-unie61f "></i></div>
      </div>
      <div  class="content_box1" @click="goToWithdrawDeposit">
        <div>
          <span><i class="iconfont icon-tixian"></i></span>
          <span>提现</span>
        </div>
        <div><i class="iconfont icon-unie61f"></i></div>
      </div>
    </div>
    <div class="content_box3" @click="goToBalanceofpayments">
        <div>
          <span><i class="iconfont icon-shouzhijilu"></i></span>
          <span>收支记录</span>
        </div>
        <div><i class="iconfont icon-unie61f"></i></div>
      </div>
  </div>
</template>
<script>
  export default {
    name: 'Detail',
    goToWithdrawDeposit: '',
    methods: {
      back() {
        this.$router.go(-1);
      },
      goToControlCards() {
        this.$router.push({ name: 'controlcards', params: { from: 'detail' } });
      },
      goToReacharge(){
        this.$router.push('/recharge')
      },
      goToWithdrawDeposit() {
        this.$router.push('/withdrawdeposit');
      },
      goToBalanceofpayments(){
        this.$router.push('/balanceofpayments')
      }
    }
  };
</script>
<style lang="less" scoped>
  .ui_detail {
    .detail_banner {
      color: #fff;
      background-color: #f7a427;
      width: 100%;
      padding-left: 30px;
      margin-top:36px;
        .balance {
          width: 180px;
          height: 32px;
          padding-top: 45px;
          font-size: 28px;
        }
        .money {
          padding-top: 30px;
          display: inline-block;
          font-size: 136px;
        }
    }
    .content_box{
      background: #fff;
      margin-bottom:46px;
      font-size:32px;
      .content_box1{
        display: flex;
        justify-content: space-between;
        padding:10px 30px;
        border-bottom:1px solid #e1e1e1;
        height:90px;
        align-items: center;
      }
      .iconfont{
        font-size:32px;
        margin-right:20px;
      }
      .icon-zaixianchongzhi{
        color:#f7a427;
      }
      .icon-tixian{
        color:#649cf0;
      }
    }
    .content_box3{
        display: flex;
        justify-content: space-between;
        background: #fff;
        height:90px;
        padding:0px 30px;
        font-size:32px;
        align-items: center;
        border-bottom:1px solid #e1e1e1;
        .iconfont{
          font-size:32px;
          margin-right:20px;
        }
        .icon-shouzhijilu{
          color:#f87187;
        }
      }
  }
</style>
